<template>
	<!-- 设备编辑 -->
	<div>
		<div class="edit-top">
			编辑信息
			<i class="el-icon-close" @click='cancel'></i>
		</div>
		<div class="edit-content">
			<div class="edit-title">设备信息</div>
			<div class="edit-item">
				<label>设备名称：</label><input v-model="info.name" type="text" />
			</div>
			<div class="edit-item">
				<label>设备编号：</label>
				<input v-model="info.code" type="text" />
			</div>	
			<div class="edit-item">
				<label>所属站点：</label>
				<select v-model="info.stationId" @click="onSelect">
					<option :value="item.id" v-for="(item,idx) in station_list" :key="idx">{{item.name}}</option>
				</select>
			</div>	
			<div class="edit-item">
				<label>所属工位：</label>
				<select v-model="info.stationWorkId">
				<option v-for='(station,idx) in dict' :value="station.id" :key="idx">{{station.name}}</option>
				</select>
			</div>
			<div class="edit-item">
				<label>IP地址：</label>
				<input v-model="info.ipAddress" type="text" />
			</div>
			<div class="edit-item">
				<label>设备型号：</label><input v-model="info.model" type="text" />
			</div>
			<div class="edit-item">
				<label>生产厂家：</label><input v-model="info.manufacturer" type="text" />
			</div>		
			
		</div>
		<div class="edit-bottom">
			<span @click='cancel'>取消</span>
			<el-button @click='save' type="primary">保存</el-button>
		</div>
	</div>
</template>

<script>
	import Global from '@/components/Global.vue'
	export default {
		props:['id'],
		data() {
			return {
				dict:'',
				station_list:[],
				info: {
					code: '',
					stationCode:'',
					name:'',
					stationId:'',
					stationWorkId:'',
					manufacturer:'',
					model:'',
					ipAddress:'',
				}
			}
		},
		mounted() {
			this.get_dict();
			this.get_station_list();
			this.get_info();
		},
		methods: {
			get_info() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'station/equipmentCamera/detail/'+this.id)
					.then(function(res) {
						if (res != '') {
							self.info = res.data;
						}
				
					})
			},
			get_station_list(){
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/station/findPage', {
						"limit": "10000",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
							var list = res.data.list
							list.splice(0, 0, { 'id': '', 'name': '请选择所属站点' })
							self.station_list = list
						}
				
					})
			},
			onSelect(){
			    this.get_dict()
			},
			get_dict() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationWork/findPage',{
					"stationId":self.info.stationId,
					"limit":1000,
					"page":1
				})
				  .then(function (res) {
					  if(res.data.list != ''){
						self.dict = res.data.list;
					  }else{
						var list = [
							 {
								'id':'',
						        'name':'该站点下暂无工位'
							 }
						 ]
						 self.dict = list;
					  }
					  self.info.stationWorkId = self.dict[0].id
					  
						
				  })
			},
			save() {
				if (this.info.name == "") {
					this.$popup.open('设备名称不能为空');
					return;
				}
				if (this.info.code == "") {
					this.$popup.open('设备编号不能为空');
					return;
				}
				if (this.info.stationId == "") {
					this.$popup.open('所属站点不能为空');
					return;
				}
				if (this.info.stationWorkId == "") {
					this.$popup.open('所属工位不能为空');
					return;
				}
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/equipmentCamera/save',{
					"name":self.info.name,
					"code":self.info.code,
					"stationId":self.info.stationId,
					"stationWorkId":self.info.stationWorkId,
					"ipAddress":self.info.ipAddress,
					"manufacturer":self.info.manufacturer,
					"model":self.info.model,
					"id":self.id
				})
					.then(function(res) {
						if (res != '') {
							self.success('保存成功');
							self.$emit('saveAdd',2)
						}
					})
				
			},
			success(content) {
				var self = this;
				this.$alert(content, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						self.$emit("saveEdit", 2);
					}
				});
			},
			
			cancel() {
				this.$emit("saveEdit", 1);
			}
		}
	}
	import '@/assets/css/edit.css'
</script>
